<template>
  <view class="city-wrapper">
    <view class="card">
      <view class="title"></view>
      <view class="list">
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
      </view>
    </view>
    <view class="card">
      <view class="title"></view>
      <view class="list">
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
        <view class="city-item"></view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.city-wrapper {
  .card {
    width: 690upx;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20upx;
    padding: 24upx;
    border-radius: 23upx;
    background-color: #fff;
    box-sizing: border-box;
    .title {
      width: 210upx;
      height: 70upx;
      background-color: #f5f5f5;
      border-radius: 23upx;
    }
    .list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      flex-direction: row;
      margin-left: -16upx;
      .city-item {
        width: 200upx;
        height: 70upx;
        margin-left: 16upx;
        margin-top: 16upx;
        border-radius: 23upx;
        background-color: #f5f5f5;
      }
    }
  }
}
</style>